<!-- banner  -->
<template>
  <div class="content">
    <el-form :model="query" ref="searchForm" label-width="100px" size="medium" class="search-form">
      <el-form-item label="轮播标题：" prop="title">
        <el-input v-model="query.title" placeholder="请输入轮播标题" @keyup.enter.native="handleSearch"></el-input>
      </el-form-item>
      <el-form-item label-width="0px">
        <Cbutton @click="handleSearch" size="medium">查询</Cbutton>
        <Cbutton type="info" size="medium" @click="handleReset('searchForm')">清空</Cbutton>
      </el-form-item>
    </el-form>

    <div class="content-container">
      <div class="content-btn">
        <Cbutton @click="handleAdd">添加轮播图</Cbutton>
      </div>
      <el-table :data="tableList" v-loading="tableLoading" ref="tableData" border fit>
        <el-table-column label="序号" type="index" align="center" width="70"></el-table-column>
        <el-table-column label="轮播图片" align="center" width="240">
          <template slot-scope="scope">
            <el-image style="height: 80px;" class="product-img-small" :src="scope.row.imgUrl" :preview-src-list="[scope.row.imgUrl]"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="轮播标题" align="center">
          <!-- <template slot-scope="scope">
            <el-popover v-if="scope.row.title && scope.row.title.length > 20" placement="top-start" title="" width="200"
                        trigger="hover" :content="scope.row.title">
              <span slot="reference">{{scope.row.title.substring(20, 0) + '...'}}</span>
            </el-popover>
            <div v-else>{{ scope.row.title }}</div>
          </template> -->
        </el-table-column>
        <el-table-column prop="href" label="跳转链接" align="center"></el-table-column>
        <el-table-column prop="type" label="跳转类型" align="center">
          <template slot-scope="scope">
            <!-- 1：无动作 2：跳转H5 , -->
            <el-tag v-if="scope.row.type === 1" size="small">无动作</el-tag>
            <el-tag v-if="scope.row.type === 2" size="small">跳转H5</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="隐藏/显示" align="center">
          <template slot-scope="scope">
            <!-- 0：否 1:是 -->
            <el-switch v-model="scope.row.statusSwitch" active-text="显示" inactive-text="隐藏" @change="handleStatus(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="medium" @click="handleUpdate(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <Pagination @pageChange="getPage" :pageDefultData="{
        pageNum: query.pageNum,
        pageRow: query.pageSize,
        totalCount: totalCount }">
    </Pagination>

    <!-- 新建轮播图 修改轮播图 -->
    <el-dialog :title="dialog.title" :visible.sync="dialog.show" width="600px" class="dialog-form"
               :close-on-click-modal="false">
      <el-form :model="dialog.data" :rules="dialog.rules" ref="DlalogForm" size="medium" label-width="130px">
        <el-form-item label="轮播图标题：" prop="title">
          <el-input v-model="dialog.data.title" placeholder="请输入轮播图标题"></el-input>
        </el-form-item>
        <el-form-item label="跳转链接：" prop="href">
          <el-input v-model="dialog.data.href" placeholder="请输入跳转链接"></el-input>
        </el-form-item>
        <el-form-item label="是否显示：" prop="status">
          <el-radio-group v-model="dialog.data.status">
            <el-radio :label="'1'">是</el-radio>
            <el-radio :label="'0'">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="跳转类型：" prop="type">
          <el-radio-group v-model="dialog.data.type">
            <el-radio :label="'2'">跳转H5</el-radio>
            <el-radio :label="'1'">无动作</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="轮播图片：" prop="imgUrl">
          <Upload v-model="dialog.data.imgUrl" :limit="1" :limitSize="{width: 750, height: 500}" :fileLists="dialog.data.imgUrl ? [dialog.data.imgUrl] : []"></Upload>
          <span style="color:#c0c4cc">轮播图片尺寸小于750x500像素</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleCancle('DlalogForm')">取 消</el-button>
        <el-button size="medium" :loading="dialog.btnLoading" type="primary" @click="handleDiaSub('DlalogForm')">确
          定</el-button>
      </span>
    </el-dialog>
    <!-- 新建轮播图 修改轮播图 -->
  </div>
</template>

<script>
import { AddBanner, GetBannerList, UpdataBanner } from '@/api/onlineMan'
import { bannerFormRules } from '@/utils/rules'
import Upload from '@/components/Upload/edit'
export default {
  name: 'Banner',
  components: { Upload },
  data () {
    return {
      query: {
        title: '',
        adPosition: '1',
        pageNum: 1,
        pageSize: 10
      },
      totalCount: 0,
      tableList: [],
      tableSelectList: [],
      tableLoading: false,
      dialog: {
        show: false,
        btnLoadin: false,
        title: '',
        type: '',
        data: {
          adPosition: '1',
          href: '',
          imgUrl: '',
          status: '',
          title: '',
          type: '',
          id: ''
        },
        originData: {
          adPosition: '1',
          href: '',
          imgUrl: '',
          status: '0',
          title: '',
          type: '1'
        },
        rules: bannerFormRules
      }
    }
  },
  props: {},
  watch: {},
  computed: {},
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      this.tableLoading = true
      const pamams = JSON.parse(JSON.stringify(this.query))
      GetBannerList(pamams).then(res => {
        this.tableLoading = false
        res.data.list.forEach(e => {
          if (e.status === 1) {
            e.statusSwitch = true
          }
        })
        this.tableList = res.data.list
        this.totalCount = res.data.total || 0
      }).catch(e => {
        this.tableLoading = false
      })
    },
    handleStatus (row) {
      const params = {
        id: row.id,
        status: row.statusSwitch ? 1 : '0'
      }
      UpdataBanner(params).then(res => {
        this.getList()
      }).catch(e => {
        this.getList()
      })
    },
    handleAdd () {
      this.dialog.title = '添加轮播图'
      this.dialog.type = 'ADD'
      this.dialog.show = true
      for (const key in this.dialog.data) {
        this.dialog.data[key] = this.dialog.originData[key]
      }
    },
    handleUpdate (row) {
      this.dialog.title = '编辑轮播图'
      this.dialog.type = 'UPDATE'
      this.dialog.show = true
      for (const key in this.dialog.data) {
        if (key === 'status' || key === 'type') {
          this.dialog.data[key] = row[key].toString()
        } else {
          this.dialog.data[key] = row[key]
        }
      }
    },
    handleCancle () {
      for (const key in this.dialog.data) {
        this.dialog.data[key] = this.dialog.originData[key]
      }
      this.dialog.data.id = ''
      this.dialog.show = false
    },
    handleDiaSub (formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) return false
        this.dialog.btnLoadin = true
        let pamams = JSON.parse(JSON.stringify(this.dialog.data))
        if (this.dialog.type === 'ADD') {
          delete pamams.id
          AddBanner(pamams).then(res => {
            this.getList()
            this.dialog.btnLoadin = false
            this.dialog.show = false
            this.$message.success(res.message || '操作成功')
          }).catch(e => {
            this.dialog.btnLoadin = false
          })
        } else {
          UpdataBanner(pamams).then(res => {
            this.getList()
            this.dialog.btnLoadin = false
            this.dialog.show = false
            this.$message.success(res.message || '操作成功')
          }).catch(e => {
            this.dialog.btnLoadin = false
          })
        }
      })
    },
    handleSearch () {
      this.query.pageNum = 1
      this.getList()
    },
    handleReset (formName) {
      this.$refs[formName].resetFields()
    },
    getPage (val) {
      this.query.pageNum = val.pageNum
      this.query.pageSize = val.pageRow
      this.getList()
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
